<!DOCTYPE html>
{% load static %}
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="{% static 'css/bootstrap-fluid-adj.css' %}" rel="stylesheet">
    <link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet" media="screen">
    <link href="{% static 'css/bootstrap-responsive.css' %}" rel="stylesheet">
    
    {% block custom_css %}{% endblock %}
    
    <title>Rango - {% block title %}Tango with Django!{% endblock %}</title>
  </head>

  <body>
    <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
          <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="brand" href="/rango/">Rango</a>
          
          <div class="nav-collapse collapse">
            <ul class="nav pull-right">
              {% if user.is_authenticated %}
              <li class="navbar-text"><div>Welcome, <a href="/rango/profile">{{ user.username }}!</a></div></li>
              <li><a href="/rango/logout/">Logout</a></li>
              {% else %}
              <li><a href="/rango/login/">Login</a></li>
              <li><a href="/rango/register/">Register Here</a></li>
              {% endif %}
            </ul>
            <ul class="nav">
              {% if user.is_authenticated %}
              <!-- <li><a href="/rango/restricted/">Restricted</a></li> -->
              <li><a href="/rango/add_category/">Add Category</a></li>
              {% endif %}
              <li><a href="/rango/search/">Search</a></li>
              <li><a href="/rango/about/">About</a></li>
              <li><a href="/rango/my_cv/">My CV</a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <div class="container-fluid">
      <div class="row-fluid">
        <div class="span3">
          <div id="side-bar" class="well sidebar-nav">
            {% block sidebar %}
            {% endblock %}
            <ul class="nav nav-list">
              <li class="nav-header"><a title="Click to hide" id="find-cat" href="#">Find a Category</a></li>
              <form id="cat-form">
                <label></label>
                <li><input class="search-query span10" type="text" name="suggestion" value="" id="suggestion" /></li>
              </form>
            </ul>
            {% if cat_list %}
            <div id="cats">
              {% include 'rango/category_list.html' with cat_list=cat_list %}
            </div>
            {% endif %}
          </div>
          <!--/.well -->
        </div>
        <!--/span-->
        <div id="body-block" class="span9 pull-right">
          {% block body_block %}{% endblock %}
        </div>
        <!--/span-->
      </div>
      <!--/row-->
      <a id="back_button" class="btn" href="javascript:history.go(-1);">Back</a>
    </div>
    <hr>
    <footer>
      <div class="container">
        <p>&copy; Rango: Let's share our useful resource</p>
      </div>
    </footer>
    <script src="{% static 'js/jquery-2.1.3.min.js' %}"></script>
    <script src="{% static 'js/bootstrap.min.js' %}"></script>
    <script src="{% static 'js/rango-ajax.js' %}"></script>
    {% block custom_js %}{% endblock %}
  </body>
</html>